<template>
	<view class="person_change">
		<view class="person-info_detail">
			<u-form :model="uForm" ref="uForm" :label-width="100">
				<u-form-item class="ufrom" label="用户名"><u-input v-model="uForm.userName" placeholder="请输入用户名" /></u-form-item>
				<u-form-item label="推广码"><u-input v-model="uForm.extensionCode" placeholder="请输入推广码" /></u-form-item>
				<u-form-item label="昵称"><u-input v-model="uForm.nickName" placeholder="请输入昵称" /></u-form-item>
			</u-form>
		</view>
		<view class="tip_mgs">
			<text class="tip-in_cash">收款信息</text>
			<text class="tip-in_error">(填写错误将影响您提现)</text>
		</view>
		<view class="person-info_detail">
			<u-form :model="uForm" ref="uForm" :label-width="130">
				<u-form-item label="银行卡号"><u-input v-model="uForm.bankCard" placeholder="未填写" /></u-form-item>
				<u-form-item label="开户姓名"><u-input v-model="uForm.openCard" placeholder="未填写" /></u-form-item>
				<u-form-item label="开户银行">
					<u-input v-model="uForm.openBank" placeholder="请选择银行" type="select" @tap="bankClick" />
				</u-form-item>
				<u-form-item label="支行地址">
					<u-input v-model="uForm.address" placeholder="请选择地址" type="select" @tap="addressClick" />
				</u-form-item>
			</u-form>
		</view>
		<view class="tip_btn">
			<u-button type="warning" @click="save">保存</u-button>
		</view>
		<u-select v-model="showBank" title="开户银行" mode="single-column" :list="bankList" 
			@confirm="bankConfirm" confirm-color="#F59328">
		</u-select>
		<u-select v-model="showAddress" title="开户地址" mode="mutil-column-auto" :list="addressList"
			@confirm="addressConfirm" confirm-color="#F59328">
		</u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uForm: {
					userName: '',
					extensionCode: '',
					nickName: '',
					bankCard: '',
					openCard: '',
					openBank: '',
					address: ''
				},
				showBank: false,
				showAddress: false,
				bankList: [
					{value: 1, label: '中国农业银行'},
					{value: 2, label: '中国建设银行'},
					{value: 3, label: '兴业银行'},
					{value: 4, label: '中国招商银行'},
					{value: 5, label: '中国工商银行'}
				],
				addressList: [
					{
						value: 1,
						label: '中国',
						children: [
							{
								value: 2,
								label: '广东',
							},
							{
								value: 5,
								label: '广西',
							}
						]
					}
				]
			};
		},
		methods: {
			bankClick(){
				this.showBank = true
			},
			addressClick(){
				this.showAddress = true
			},
			bankConfirm(e){
				this.uForm.openBank = e[0].label
				console.log(e)
			},
			addressConfirm(e){
				this.uForm.address = e[0].label + e[1].label
				console.log(e)
			},
			// 保存
			save(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.person_change{
	padding: 20rpx 0rpx;
	background-color: #F4F5F9;
	font-size: 30rpx;
	.person-info_detail{
		padding: 0rpx 40rpx;
		// margin: 40rpx 0rpx;
		background-color: #FFFFFF;
	}
	.tip_mgs{
		margin: 30rpx 40rpx;
		font-size: 30rpx;
	}
	.tip-in_cash{
		font-weight: bold;
	}
	.tip-in_error{
		margin: 0rpx 20rpx;
		color: #F59328;
	}
	.tip_btn{
		margin: 40rpx;
	}
	/deep/ .u-select__header{
		border-bottom: 1px solid #EAEAEA;
	}
	/deep/ .u-select__header__title{
		font-size: 34rpx;
		font-weight: bold;
	}
	/deep/ .u-line-1{
		margin: 20rpx 0rpx;
		font-size: 40rpx;
	}
	/deep/ .uni-input-input{
		color: #000000;
		font-size: 34rpx;
	}
}
</style>
